<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">维修工单</div>
                    <div class="layui-card-body">
                        <div style="margin-bottom: 10px;">
                            <div class="layui-input-item" style="float:left;padding-right:10px;">
                                <form class="layui-form">
                                    <div class="layui-inline">
                                        <input id="search-no" type="text" placeholder="请输入工单号"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline">
                                        <input id="search-content" type="text" placeholder="请输入维修内容"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline">
                                        <input id="search-create-by-name" type="text" placeholder="请输入创建人"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline">
                                        <select id="search-state">
                                            <option value="">请选择状态</option>
                                            <option value="1">待执行</option>
                                            <option value="2">已归档</option>
                                            <option value="3">已撤销</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline">
                                        <a id="btn-search" class="layui-btn">查找</a>
                                    </div>
                                </form>
                            </div>
                            <div style="float:right;">
                                <a id="btn-add" class="layui-btn">添加</a>
                                <a id="btn-batch-delete" class="layui-btn layui-btn-danger">删除</a>
                                <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                        <table class="layui-hide" id="repair-table" lay-filter="repair-table"></table>
                        <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
                        {{#  if(d.state < 2){ }}
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="terminate">撤销</a>
                        {{#  } }}
                        {{#  if(d.state >= 2){ }}
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        {{#  } }}
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate'], function () {
            var $ = layui.$;
            var table = layui.table;
            var popupIndex;

            table.render({
                elem: '#repair-table',
                url: 'repairs',
                title: '',
                skin: 'line',
                cols: [[
                    { type: 'checkbox' },
                    {
                        title: '序号', width: 60, templet: function (d) {
                            return d.LAY_TABLE_INDEX + 1;
                        }
                    },
                    { field: 'no', title: '维修单号',width: 200 },
                    { field: 'faultNo', title: '缺陷单号',width: 200 }, 
                    { field: 'buildingGroup', title: '建筑群',width: 120 }, 
                    { field: 'deviceSystem', title: '设备系统',width: 120 }, 
                    { field: 'area', title: '区域简称',width: 120 }, 
                    { field: 'deviceType', title: '设备类型',width: 120 }, 
                    { field: 'deviceShortName', title: '设备简称',width: 120 }, 
                    { field: 'deviceCode', title: '设备编号',width: 120 }, 
                    { field: 'content', title: '维修内容',width: 120 },
                    { field: 'createByName', title: '创建人',width: 120 },
                    { field: 'auditByName', title: '审核人' ,width: 120}, 
                    { field: 'stateText', title: '工单状态',width: 120 },
                    { fixed: 'right', title: '操作', toolbar: '#toolbar-operation' ,width: 200}
                ]],
                page: true
            });

            function showDetail(id, title) {
                var p = layer.open({
                    title: title,
                    type: 2,
                    content: 'repair-info.html?id=' + id,
                    area: ['840px', '630px'],
                    maxmin: true
                });
                layer.full(p);
            }

            function search() {
                table.reload('repair-table', {
                    where: {
                        no: $('#search-no').val(),
                        content: $('#search-content').val(),
                        createByName: $('#search-create-by-name').val(),
                        state: $('#search-state').val()
                    },
                    page: {
                        curr: 1
                    }
                });
            }

            $(document).on('keypress', function (e) {
                if (e.which == 13) {
                    search();
                }
            });

            $("#btn-search").on('click', function () {
                search();
            });

            $("#btn-add").on('click', function () {
                popupIndex = showRepairForm();
            });

            $("#btn-refresh").on('click', function () {
                table.reload('repair-table');
                layer.msg('表格已刷新');
            });

            $("#btn-batch-delete").on('click', function () {
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                    var ids = [];
                    var data = table.checkStatus('repair-table').data;
                    for (let i in data) {
                        ids.push(data[i].id);
                    }
                    $.ajax({
                        url: 'repairs/' + ids.toString(),
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('repair-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                });
            });

            table.on('tool(repair-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该记录吗？', function (index) {
                        $.ajax({
                            url: 'repairs/' + data.id,
                            type: 'DELETE',
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('repair-table');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'terminate') {
                    layer.confirm('真的撤销吗？', function (index) {
                        $.ajax({
                            url: 'repairs/terminate/',
                            type: 'POST',
                            data: { id: data.id },
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('工单已撤销');
                                    table.reload('repair-table');
                                } else {
                                    layer.msg('工单撤销失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'detail') {
                    showDetail(data.id, '维修工单');
                }
            });

        });
    </script>
</body>

</html>